<template>
  <div>
      <ul>
          <!-- 声明式路由 -->
          <li><router-link to="/contacts/all_contacts">All contacts</router-link></li>
          <li><router-link to="/contacts/alice">Alice</router-link></li>
          <li><router-link to="/contacts/bob">Bob</router-link></li>
      </ul>
      <button @click="btn">随机显示</button>
      <!-- 路由视图 -->
      <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    btn () {
      this.$router.push('/contacts/' + ['all_contacts', 'alice', 'bob'].sort((a, b) => Math.random() - 0.5).shift())
    }
  }
}
</script>

<style>

</style>
